<template>
  <div class="echarts-container" :class="props.container?.join(' ')">
    <div class="echarts-item height-100" :class="props.classList?.join(' ')">
      <slot></slot>
    </div>
    <div class="echarts-back" />
  </div>
</template>
<script setup lang="ts">
const props = defineProps<{ classList?: string[], container?: string[],isMultiple?:boolean}>()
</script>
<style scoped>
.monitor {
  display: grid;
  grid-template-rows: auto 1fr;
}

.echarts-item {
  background: url("../assets/back-item.png") no-repeat;
  background-size: 100% 100%;
}

.echarts-mul {
  display: grid;
  grid-template-rows: 12% 1fr auto; 
}

.echarts-mul-2 {
  display: grid;
  grid-template-rows: 12% minmax(0,1fr);
}

.echarts-back {
  position: absolute;
  inset: 0 0 0 0;
  background: url("../assets/echarts-back.png") no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}

.echarts-container {
  position: relative;
  height: 100%;
}

.echarts-hidden {
  overflow: hidden;
}
</style>
